<template>
    <el-form
            :inline="true"
            :model="form"
            :rules="rules"
            ref="form"
            size="mini"
            style="margin-bottom: -18px;">

        <el-form-item label="搜索类型" prop="type">
            <el-select
                    @change="handleSearchValueOption"
                    v-model="form.type"
                    placeholder="请选择"
                    style="width: 100px;">
                <el-option label="司机姓名" value="driverName"/>
                <el-option label="司机类型" value="driverType"/>
                <el-option label="司机籍贯" value="originPlace"/>
                <el-option label="所属车队" value="fleetName"/>
                <el-option label="录入状态" value="status"/>
                <el-option label="注册来源" value="registerSource"/>
            </el-select>
        </el-form-item>


        <el-form-item prop="value" v-show="!originPlaceShow">
            <el-select
                    filterable
                    v-model="form.value"
                    placeholder="请输入"
                    style="width: 100px;">
                <el-option v-for="(item,index) in searchValueOption" :label="item.label" :value="item.value"
                           :key="index"/>
            </el-select>
        </el-form-item>
        <el-form-item v-show="originPlaceShow">
            <el-cascader
                    filterable
                    :options="options"
                    v-model="selectedOptions"
                    @change="handlePlaceSelect">
            </el-cascader>
        </el-form-item>
        <el-form-item>
            <el-button
                    type="primary"
                    @click="handleFormSubmit">
                <d2-icon name="search"/>
                查询
            </el-button>
        </el-form-item>

        <el-form-item>
            <el-button
                    @click="handleFormReset">
                <d2-icon name="refresh"/>
                重置
            </el-button>
        </el-form-item>

    </el-form>
</template>

<script>


    import { provinceAndCityData,CodeToText} from 'element-china-area-data'
    import {getDriverList} from '@/api/driver/'
    export default {

        data() {
            return {
                options: provinceAndCityData,
                selectedOptions: [],
                originPlaceShow: false,
                searchValueOption: [],
                form: {
                    type: '',
                    value: null,

                },
                rules: {
                    type: [{required: true, message: '请选择一个状态', trigger: 'change'}],
                    value: [{required: true, message: '请输入内容', trigger: 'change'}],
                }
            }
        },
        methods: {
            handleFormSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.form[this.form.type] = this.form.value
                        this.$emit('submit', this.form)
                    } else {
                        this.$notify.error({
                            title: '错误',
                            message: '表单校验失败'
                        })
                        return false
                    }
                })
            },
            handleFormReset() {
                this.$refs.form.resetFields()
                this.$emit('submit',{})
                this.originPlaceShow = false
            },
            //处理地区选择
            handlePlaceSelect(val){
                this.form.value = CodeToText[val[0]]+' '+CodeToText[val[1]]

            },
            //根据搜索选择改变第二个select的值
            handleSearchValueOption(type) {
                this.form.value = null
                this.originPlaceShow = false
                this.searchValueOption = []
                switch (type) {
                    case 'driverName':
                        //获取所有的司机姓名 数据只有1页的时候
                        getDriverList({
                            pageNum: 1,
                            pageSize:10000
                        })
                            .then(res => {
                                 res.data.forEach((value)=>{
                                     var item = new Object()
                                     item.value = value.driverCV.driverName
                                     item.label = value.driverCV.driverName
                                     this.searchValueOption.push(item)
                                 })

                            })
                        break
                    case 'driverType':
                        this.searchValueOption = [
                            {
                                value: '自有',
                                label: '自有'
                            },
                            {
                                value: '外请',
                                label: '外请'
                            }
                        ]
                        break
                    case 'originPlace':
                        this.originPlaceShow = true
                        break
                    case 'fleetName':
                        //获取所有车队的名称
                        break
                    case 'status':
                        this.searchValueOption = [
                            {
                                value: 0,
                                label: '未提交'
                            },
                            {
                                value: 1,
                                label: '已审核'
                            },
                            {
                                value: 2,
                                label: '已认证'
                            }
                        ]
                        break
                    case 'registerSource':
                        this.searchValueOption = [
                            {
                                value: 'app',
                                label: 'app'
                            },
                            {
                                value: '本地',
                                label: '本地'
                            }
                        ]
                        break
                }
            }
        }
    }
</script>
